<div class="article">
  <div class="article-option">
    <div class="article-option-left">
      <button type="button" class="btn btn-primary" id="article-add">新增</button>
      <button type="button" class="btn btn-danger" id="article-bdelete">批量删除</button>
    </div>
    <div class="article-option-right">
      <input type="text" class="form-control" id="article-search-content" placeholder="请输入搜索内容">
      <button type="button" class="btn btn-success" id="article-search">搜索</button>
      <button type="button" class="btn btn-warning" id="article-reset">重置</button>
    </div>
  </div>
  <div class="article-table">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>编号</th>
          <th>文章标题</th>
          <th>所属栏目</th>
          <th>作者</th>
          <th>发布时间</th>
          <th>阅读次数</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
    </table>
    <div class="article-table-content">
      <table class="table table-bordered">
        <tbody>
        
        </tbody>
      </table>
    </div>
  </div>
  <!-- 模态框 -->
  <div class="modal fade" id="article-modal" tabindex="-1" role="dialog" aria-labelledby="article-modalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="article-modalLabel">新增咨询</h4>
        </div>
        <div class="modal-body">
          <!-- 表单 -->
          <form class="form-horizontal">
            <div class="form-group">
              <label for="article-title" class="col-sm-2 control-label">文章标题</label>
              <input type="text" class="form-control" id="article-title">
            </div>
            <div class="form-group">
              <label for="article-liststyle" class="col-sm-2 control-label">列表样式</label>
              <input type="text" class="form-control" id="article-liststyle">
            </div>
            <div class="form-group">
              <label for="article-category" class="col-sm-2 control-label">所属栏目</label>
              <input type="text" class="form-control" id="article-category">
            </div>
            <div class="form-group">
              <label for="article-author" class="col-sm-2 control-label">作者</label>
              <input type="text" class="form-control" id="article-author">
            </div>
            <div class="form-group">
              <label for="article-readtimes" class="col-sm-2 control-label">阅读次数</label>
              <input type="text" class="form-control" id="article-readtimes">
            </div>
            <div class="form-group">
              <label for="article-category" class="col-sm-2 control-label">列表缩略图</label>
              <br>
              <button type="submit" class="btn btn-default">点击上传</button>
            </div>
            <div class="form-group">
              <label for="article-main" class="col-sm-2 control-label">正文</label>
              <textarea class="form-control" rows="4" id="article-main" width="467.5px"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button id="article-save" type="button" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 分页 -->
  <div id="articlePage" class="demo"></div>
</div>
<script>
  //审核
  $('.table').on('click','.passBtn',function(){
      // 获取当前点击的文章id
      var id = $(this).closest('tr').find('[type=checkbox]').val();
      myAjax('/manager/article/checkArticle','get',{
          id:id,
          status:'审核通过'
      },function(res){
          if(res.status == 200){
            alert(res.message)
            // 更新数据
            findAll(0)
          } else {
            alert('审核失败！')
          }
      })
    })
  var articleData = [];
  var currentArticle = {};
  findAll(0);
  //搜索按钮绑定事件
  $('#article-search').click(function(){
    $('.article tbody').empty();

    //获取搜索框的值
    var keywords = $('#article-search-content').val();

    myAjax('/manager/article/findArticle','get',{page:0,pageSize:10,keywords:keywords},function(res){
      articleData = res.data.list;
      res.data.list.forEach(function(item) {
        var $tr = $(`
          <tr>
            <td><input type="checkbox" value="`+item.id+`"></td>
            <td>`+item.title+`</td>
            <td>`+(item.category?item.category.name:'--')+`</td>
            <td>`+(item.author?item.author.username:'--')+`</td>
            <td>`+item.publishtime+`</td>
            <td>`+item.readtimes+`</td>
            <td>`+(item.status == '审核通过' ? item.status : '<button class="btn btn-info passBtn">审核</button>' )+`</td>
            <td>
              <span class="article-delete"><i class="fa fa-trash-o" title="删除"></i></span>
              <span class="article-write"><i class="fa fa-pencil-square-o" title="修改"></i></span>
            </td>
          </tr>
        `);
        $('.article tbody').append($tr);
      })
      $("#articlePage").sPage({
        page:res.data.page+1,
        pageSize:res.data.pageSize,
        total:res.data.total,
        prevPage:"←",
        nextPage:"→",
        backFun:function(page){
          // page为当前点击的页码
          findAll(page-1)
        }
      });
    });
  })
  //获取栏目数据，遍历数据，生成表格
  function findAll(page){
    $('.article tbody').empty();
    myAjax('/manager/article/findArticle','get',{page:page,pageSize:10},function(res){
      articleData = res.data.list;
      res.data.list.forEach(function(item) {
        var $tr = $(`
          <tr>
            <td><input type="checkbox" value="`+item.id+`"></td>
            <td>`+item.title+`</td>
            <td>`+(item.category?item.category.name:'--')+`</td>
            <td>`+(item.author?item.author.username:'--')+`</td>
            <td>`+item.publishtime+`</td>
            <td>`+item.readtimes+`</td>
            <td>`+(item.status == '审核通过' ? item.status : '<button class="btn btn-info passBtn">审核</button>' )+`</td>
            <td>
              <span class="article-delete"><i class="fa fa-trash-o" title="删除"></i></span>
              <span class="article-write"><i class="fa fa-pencil-square-o" title="修改"></i></span>
            </td>
          </tr>
        `);
        $('.article tbody').append($tr);
      })
      $("#articlePage").sPage({
        page:res.data.page+1,
        pageSize:res.data.pageSize,
        total:res.data.total,
        prevPage:"←",
        nextPage:"→",
        backFun:function(page){
          // page为当前点击的页码
          findAll(page-1)
        }
      });
    });
  }
  //新增  设置模态框标题，清空内部表单内容，显示模态框
  $('#article-add').click(function () {
    // 显示模态框
    currentarticle = {};
    $('#article-title').val('');
    $('#article-author').val('');
    $('#article-readtimes').val('');
    $('#article-category').val('');
    $('#article-main').val('');
    $('#article-liststyle').val('');
    
    $('#article-modalLabel').text('新增文章');
    $('#article-modal').modal('show');
  });
  // 修改  事件代理   设置模态框标题，设置内部表单内容，显示模态框
  $('.article-table-content').on('click', '.article-write', function () {
    var id = $(this).closest('tr').find('[type=checkbox]').val();
    currentArticle = articleData.filter(function (item) {
      return item.id == id;
    })[0];
    $('#article-title').val(currentArticle.title);
    $('#article-category').val(currentArticle.category?currentArticle.category.name:'');
    $('#article-main').val(currentArticle.content);
    $('#article-liststyle').val(currentArticle.liststyle);
    $('#article-author').val(currentArticle.author?currentArticle.author.username:'');
    $('#article-readtimes').val(currentArticle.readtimes);

    $('#article-modalLabel').text('修改文章');
    $('#article-modal').modal('show');
  })
  //保存,模态框内的确定按钮 获取数据，验证数据，访问后台保存，更新数据，关闭模态框
  $('#article-save').click(function(){
    //获取表单数据
    var title = $('#article-title').val();
    var category = $('#article-category').val();
    var main = $('#article-main').val();
    var liststyle = $('#article-liststyle').val();
    var readtimes = $('#article-readtimes').val();
    var author = $('#article-author').val();
    //验证数据
    if(title&&liststyle){
      //封装数据，保存
      var obj = {
        id:currentArticle.id,
        readtimes:readtimes,
        author:author,
        title:title,
        category:category,
        content:main,
        liststyle:liststyle,
      };
      myAjax('/manager/article/saveOrUpdateArticle','post',obj,function(res){
        if(res.status ==200){
          findAll(0);
          $("#articlePage").sPage({
            page:res.data.page+1,
            pageSize:res.data.pageSize,
            total:res.data.total,
            prevPage:"←",
            nextPage:"→",
            backFun:function(page){
              // page为当前点击的页码
              findAll(page-1)
            }
          });
          $('#article-modal').modal('hide');
        }else{
          alert('保存失败');
        }
      })
    }else{
      alert('请输入完整的信息！');
    }
  })

  // 单个删除 事件代理
  $('.article-table-content').on('click', '.article-delete', function () {
    // 获取要删除的id
    var id = $(this).closest('tr').find('[type=checkbox]').val();
    var result = confirm('是否确认删除?');
    if (result) {
      // 删除  与后台进行数据交互
      myAjax('/manager/article/deleteArticleById', 'get', { id: id }, function (res) {
        if (res.status == 200) {
          // alert('删除成功');
          // 更新页面的数据
          findAll(0);
          $("#articlePage").sPage({
            page:res.data.page+1,
            pageSize:res.data.pageSize,
            total:res.data.total,
            prevPage:"←",
            nextPage:"→",
            backFun:function(page){
              // page为当前点击的页码
              findAll(page-1)
            }
          });
        } else {
          alert('删除失败');
        }
      }, function (err) {
        alert('删除失败');
      });
    }
  });

  // 批量删除
  $('#article-bdelete').click(function () {
    // 获取用户选中的复选按钮的id，数组
    var ids = $('.article-table-content :checkbox:checked').map(function (index, item) {
      return item.value;
    }).toArray();
    if (ids.length > 0) {
      var result = confirm('是否确认删除？');
      if (result) {
        // 批量删除
        myAjax('/manager/article/batchDeleteArticle', 'post', { ids: ids.toString() }, function (res) {
          if (res.status == 200) {
            findAll(0);
            $("#articlePage").sPage({
              page:res.data.page+1,
              pageSize:res.data.pageSize,
              total:res.data.total,
              prevPage:"←",
              nextPage:"→",
              backFun:function(page){
                // page为当前点击的页码
                findAll(page-1)
              }
            });
          } else {
            alert('批量删除失败');
            // 清空用户选择的checkbox
            $('.article-table-content :checkbox:checked').prop('checked', false);
          }
        }, function (err) {
          alert('批量删除失败');
          // 清空用户选择的checkbox
          $('.article-table-content :checkbox:checked').prop('checked', false);
        });
      }
    } else {
      alert('请勾选要删除的数据');
    }
  })










</script>